<template>
  <div class="app-container">
    <el-form :inline="true" class="form-inline">
      <el-form-item label="搜索消息">
        <el-input v-model="searchInfo" clearable placeholder="请输入消息内容"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="content">
      <div class="_list">
        <el-table highlight-current-row :default-sort="{ prop: 'createTime', order: 'descending' }" :height="$tools.tableHeight()" @selection-change="handleSelectionChange" :data="dataList" style="width: 100%" v-loading.body="listLoading">
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column label="反馈内容">
            <template slot-scope="scope">
              <div class="content">{{ scope.row.fbContentext }}</div>
            </template>
          </el-table-column>
          <el-table-column label="图片">
            <template slot-scope="scope">
              <template v-if="scope.row.fbImg">
                <template v-for="(item,index) in scope.row.fbImg.split(',')">
                  <div class="fbImg" :key="index">
                    <el-image style="width: 40px; height: 40px" class="img" :src="item" :preview-src-list="scope.row.fbImg.split(',')">
                    </el-image>
                  </div>
                </template>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="设备信息">
            <template slot-scope="scope">
              <div class="content" v-html="deviceToJson(scope.row.deviceInfo)"></div>
            </template>
          </el-table-column>
          <el-table-column label="系统版本">
            <template slot-scope="scope">
              <div class="content" v-html="deviceToJsonVer(scope.row.deviceInfo)"></div>
            </template>
          </el-table-column>
          <!-- <el-table-column label="回复内容" width="380">
          <template slot-scope="scope">
            <div class="content">
              <el-popover placement="right" width="450" trigger="hover" v-if="scope.row.replyContent && scope.row.replyContent.length > 50">
                <div class="con">{{ scope.row.replyContent }}</div>
                <span slot="reference">{{ scope.row.replyContent }}</span>
              </el-popover>
              <span v-else>{{ scope.row.replyContent }}</span>
            </div>
          </template>
        </el-table-column> -->
          <el-table-column label="用户信息" width="170">
            <template slot-scope="scope">
              <div class="user_info">
                <div class="thumbnail">
                  <img :src="scope.row.avatar ? scope.row.avatar : '/static/images/avatar_user.png'" />
                </div>
                <div class="info">
                  <div class="_name">{{ scope.row.userName }}</div>
                  <div>{{ scope.row.mobile }}</div>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" sortable :sort-method="sortByDate">
            <template slot-scope="scope">
              {{ scope.row.createTime | formatDate }}
            </template>
          </el-table-column>
          <el-table-column label="处理状态">
            <template slot-scope="scope">
              <el-tag :type="scope.row.status === 1 ? 'danger' : 'success'">{{ scope.row.status === 1 ? '未读' : '已读' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200">
            <template slot-scope="scope">
              <el-button type="text" v-if="scope.row.status === 1" @click="optionFeedBack(scope.row.id)">标记为已读</el-button>
              <el-button type="text" :class="{'red-button':!scope.row.replyContent}" @click="replyToview(scope.row)">{{scope.row.replyContent?'查看回复':'回复'}}</el-button>
              <el-button type="text" @click="arrDelete('1', scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pages">
        <div class="left">
          <el-tooltip class="item" effect="dark" content="批量删除" placement="top">
            <el-button size="small" type="danger" @click="arrDelete('2')">批量删除</el-button>
          </el-tooltip>
        </div>
        <div class="right" v-if="total > 0">
          <el-pagination background :total="total" :page-size="15" :current-page.sync="page" layout="total, prev, pager, next, jumper" @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog :title="replyContent?'查看回复':'回复'" width="30%" :visible.sync="outerVisible">
      <div class="replyContent" v-if="replyContent">{{replyContent}}</div>
      <el-input type="textarea" :rows="12" v-else placeholder="请输入回复内容" v-model="textarea"> </el-input>
      <div slot="footer" class="dialog-footer" v-if="!replyContent">
        <el-button @click="outerVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">回复</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import mixinsTable from '@/util/mixins.table';
export default {
  name: 'Feedback',
  mixins: [mixinsTable],
  data () {
    return {
      id: '',
      tabIndex: 2,
      textarea: '',
      searchInfo: '',
      replyContent: null,
      outerVisible: false,
      searchField: 'searchInfo',
      APISERVER: 'onlineFeedBackList',
      DELETEAPI: 'deleteFeedBack',
    };
  },
  created () {
    this.getList();
  },
  methods: {
    // 获取APP设备信息
    deviceToJson (val) {
      var deviceInfo = JSON.parse(val)
      return !deviceInfo.brand && !deviceInfo.brand && !deviceInfo.brand ? '--'
        : deviceInfo.brand + '<br/>' + deviceInfo.deviceType + '<br/>' + deviceInfo.systemVersion
    },
    // 获取APP版本号
    deviceToJsonVer (val) {
      var deviceInfo = JSON.parse(val)
      return deviceInfo.appVersion || '--'
    },
    handleSetTabIndex () {
      this.tabIndex === '1' && this.$router.push({ path: '/message/index' });
    },
    async onSubmit () {
      if (!this.textarea) return this.$message.error('请填写回复内容!');

      const { code } = await this.$API.editFeedBack(this.id, {
        replyContent: this.textarea
      });

      if (code === 200) {
        this.outerVisible = false;
        this.$message.success('回复成功!');
        this.getList();
      }
    },
    replyToview (data) {
      this.outerVisible = true;
      this.id = data.id;
      this.replyContent = data.replyContent;
      this.textarea = data.replyContent;
    },
    optionFeedBack (id) {
      this.$API
        .editFeedBack(id, {
          status: 2
        })
        .then(res => {
          if (res.code === 200) {
            this.$message.success('标记成功');
            this.getList();
          } else {
            this.$message.error(res.message);
          }
        });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  position: relative;
  ._list {
    span.reference {
      display: block;
      height: 40px;
      line-height: 40px;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
  .red-button {
    color: #f75151;
  }
}
.fbImg {
  display: inline-flex;
  .img {
    flex: 1;
    margin-right: 10px;
  }
}
.replyContent {
  min-height: 200px;
  line-height: 24px;
}
.form-inline {
  position: absolute;
  top: -51px;
  left: 200px;
}
</style>
